<template>

  <!-- 定义布局容器 -->
  <el-container class="home-container">
    <!-- top -->
    <el-header style="height: 40px;background-color: #000000;">
      <div>
        <span>南欧汽配之家</span>
      </div>
      <el-row>
        <el-button type="danger" round style="text-align: center;">退出登录</el-button>
        <!-- <el-button type="primary" round style="text-align: center;">登录</el-button>
        <el-button type="success" round>注册</el-button> -->
      </el-row>

    </el-header>

    <!-- 导航栏 -->
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#303133"
      text-color="#fff"
      active-text-color="#4094ff"
      style="padding-left: 500px;background-color: #303133;"
      >
     <el-menu-item index="1" style="margin-right: 60px;font-size: 18px;" @click="tiaozhuan1"><i class="el-icon-s-home"></i>首页</el-menu-item>
     <el-menu-item index="2" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan2"><i class="el-icon-s-shop" ></i>购物中心</el-menu-item>
     <el-menu-item index="3" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan3"><i class="el-icon-s-opportunity"></i>车型查询</el-menu-item>
     <el-menu-item index="4" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan4"><i class="el-icon-s-claim"></i>关于我们</a></el-menu-item>
     <el-menu-item index="5" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan5"><i class="el-icon-user-solid"></i>个人中心</a></el-menu-item>
     </el-menu>

<div>
 <div class="title"><i class="el-icon-price-tag"></i>关于项目</div>

     <el-row>
      <el-col :span="18" :offset="3">
         <el-main>
          <el-card class="box">
              <p style="margin-top: 20px">
                  <el-tag type="success" effect="dark">功能</el-tag>

                <br>
                  游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
                <br>
                  用户功能：用户可登录系统可维护购买商品
               <br>
                 游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
               <br>
                 用户功能：用户可登录系统可维护购买商品
               <br>
                 游客功能:用户可以在未登录时,查看首页,购物中心和关于项目的相关信息
               <br>
                 用户功能：用户可登录系统可维护购买商品

              </p>
              <p>
                  <el-tag type="primary" effect="dark">优点</el-tag>

              </p>
              <p>
                  <el-tag type="warning" effect="dark">模块</el-tag>
                  本系统包含的模块：注册模块、登录模块、用户模块、管理员模块、供应商模块。

              </p>
              <!-- <el-image :src="about" fit="fit" style="width: 100%;height: 100%"></el-image> -->
          </el-card>
          </el-main>
      </el-col>
     </el-row>

</div>

<TheHeader></TheHeader>
  </el-container>

</template>

<script>
import TheHeader from '../the/TheFooter.vue'
import TheFooter from '../the/TheHeader.vue'
export default {

  data () {
    return {
      // activeIndex: '1',
      activeIndex2: '4'

    }
  },
  components: {
    TheHeader,
    TheFooter
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    tiaozhuan1 () {
      this.$router.push('/index')
    },
    tiaozhuan2 () {
      this.$router.push('/shopping')
    },
    tiaozhuan3 () {
      this.$router.push('/car')
    },
    tiaozhuan4 () {
      this.$router.push('/about')
    },
    tiaozhuan5 () {
      this.$router.push('/usernew')
    }
  },
  computed: {
    activeIndex () {
      return this.$route.path.replace('/', '')
    }
  }
}
</script>

<style lang="less" scoped>

   .el-header {
     background-color: rgb(43,42,50);
     display: flex; //灵活的盒子容器
     justify-content: space-between; //左右对齐
     align-items: center; //文本元素居中对齐
     color: #FFFFFF; //设定字体颜色
     padding-left: 1px;

     >div {
       display: flex;
       align-items: center;

       span {
         margin-left: 15px;
         font-size: 25px; //设定字体高度
       }
     }
   }

.title{
    text-align: center;
    font-size: 30px;
    margin-top: 50px;
    font-family: "宋体";
    font-weight: bold;
}
.el-row{
    margin-bottom: 20px;
    margin-top: 15px;
}
.box{
    padding: 30px;
    background-image: url('../../assets/img/2.png') ;
    /*height: 600px;*/
}
.el-card {
    background-color: #EEEEEE;
    background-image: url('../../assets/img/2.png') ;
  }
.box p{
    font-family: "宋体";
    font-size: 20px;
    line-height: 40px;
}

</style>
